<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="660px"
    append-to-body
    class="dialogClass"
    @close="cancel"
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="../../../../assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="用户名称:" prop="nickName">
        <el-input
          v-model="form.nickName"
          placeholder="请输入用户名称"
          maxlength="30"
        />
      </el-form-item>
      <el-form-item label="是否停用:">
        <el-radio-group v-model="form.status">
          <el-radio
            v-for="dict in dict.type.sys_normal_disable"
            :key="dict.value"
            :label="dict.value"
            >{{ dict.label }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="所属部门:" prop="deptId">
        <treeselect
          @select="getRoleList($event)"
          v-model="form.deptId"
          :options="deptOptions"
          :show-count="true"
          placeholder="请选择所属部门"
        />
      </el-form-item>
      <el-form-item label="角色:" prop="roleIds">
        <el-select
          style="width: 100%"
          v-model="form.roleIds"
          multiple
          placeholder="请选择角色"
          :disabled="roleFlag"
        >
          <el-option
            v-for="item in roleOptions"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
            :disabled="item.status == 1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input
          v-model="form.email"
          placeholder="请输入邮箱地址"
          maxlength="50"
        />
      </el-form-item>
      <el-form-item label="手机号码:" prop="phonenumber">
        <el-input
          v-model="form.phonenumber"
          placeholder="请输入手机号码"
          maxlength="11"
        />
      </el-form-item>
      <!-- <el-row>
        <el-col :span="12">
          <el-form-item
            v-if="form.userId == undefined"
            label="联系人:"
            prop="contactPerson"
          >
            <el-input
              v-model="form.userName"
              placeholder="请输入联系人姓名"
              maxlength="30"
            /> </el-form-item></el-col
        ><el-col :span="12">
          <el-form-item
            v-if="form.userId == undefined"
            label="联系方式:"
            prop="password"
          >
            <el-input
              v-model="form.contactTel"
              placeholder="请输入联系方式"
              type="password"
              maxlength="20"
              show-password
            />
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="12">
          <el-form-item
            v-if="form.userId == undefined"
            label="登录账号:"
            prop="userName"
          >
            <el-input
              v-model="form.userName"
              placeholder="请输入登录账号"
              maxlength="30"
            /> </el-form-item></el-col
        ><el-col :span="12">
          <el-form-item
            v-if="form.userId == undefined"
            label="用户密码:"
            prop="password"
          >
            <el-input
              v-model="form.password"
              placeholder="请输入用户密码"
              type="password"
              maxlength="20"
              show-password
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel" class="resetButton">取 消</el-button>
      <el-button type="primary" @click="submitForm" class="searchButton"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
  getRoleIdListByDeptId,
} from "@/api/system/user";
import {
  PAGESIZE,
  PAGENUM,
  USEREXPORTURL,
  MODALTYPE,
  PASSWORD,
} from "../../../../utils/variable";
import Treeselect from "@riophae/vue-treeselect";
export default {
  name: "UserModal",
  dicts: ["sys_normal_disable"],
  components: { Treeselect },
  props: ["modalType", "userId"],
  data() {
    return {
      //表单参数
      form: {},
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: [],
      // 角色选项
      roleOptions: [],
      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: "角色名称不能为空", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        roleIds: [
          { required: true, message: "用户角色不能为空", trigger: "blur" },
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户密码长度必须介于 5 和 20 之间",
            trigger: "blur",
          },
        ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  computed: {
    roleFlag() {
      if (this.form.deptId) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {
    // "form.deptId": {
    //   handler(value) {
    //     this.form.roleIds = [];
    //   },
    //   deep: true,
    // },
    modalType: {
      handler(value) {
        if (value == MODALTYPE["新增"]) {
          this.reset();
          getUser().then((response) => {
            this.postOptions = response.posts;
            this.roleOptions = response.roles;
            this.open = true;
            this.title = "添加用户";
            this.form.password = this.initPassword;
          });
        } else if (value == MODALTYPE["修改"]) {
          this.reset();
          if (this.userId) {
            getUser(this.userId).then((response) => {
              this.form = response.data;
              this.postOptions = response.posts;
              let dept = {
                deptId: this.form.deptId,
              };
              getRoleIdListByDeptId(dept).then((response) => {
                this.roleOptions = response.data;
              });
              this.$set(this.form, "postIds", response.postIds);
              this.$set(this.form, "roleIds", response.roleIds);
              this.open = true;
              this.title = "修改用户";
              this.form.password = "";
            });
          }
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getDeptTree();
    this.getConfigKey("sys.user.initPassword").then((response) => {
      this.initPassword = response.msg;
      this.form.password = this.initPassword;
    });
  },
  methods: {
    getRoleList(val) {
      this.form.roleIds = [];
      let dept = {
        deptId: val.id,
      };
      getRoleIdListByDeptId(dept).then((response) => {
        this.roleOptions = response.data;
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.$emit("update:modalType", undefined);
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.userId != undefined) {
            updateUser(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.$emit("update:modalType", undefined);
              this.$emit("fatherMethod");
            });
          } else {
            addUser(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.$emit("update:modalType", undefined);
              this.$emit("fatherMethod");
            });
          }
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "../../../../assets/styles/dialog.scss"; //模态框样式
.formClass {
  padding: 10px 60px 0px 30px;
}
::v-deep.vue-treeselect__single-value {
  font-size: 13px !important;
  color: rgb(115 117 120) !important;
}
</style>
